<template>
	<view style="display: flex;flex-direction: column;height: calc(100vh - 99rpx);">
		<view class="view_bg">
			<image class="img_bg" src="/static/image/whzs.png"></image>
			<view class="view_top">
				<view style="align-items: flex-end;">
					<image class="message" src="/static/image/weizhi.png"></image>
					<text style="font-size: 34rpx;margin-left: 6rpx;margin-bottom: 8rpx;">{{city!=""?city:"无"}}</text>
				</view>
				<image class="message" src="/static/image/message.png" @click="goNotice"></image>
				<text class="num" v-if="num>0">{{num>99?'99+':num}}</text>
			</view>
			<view class="view_buttom">
				<!-- 装卸货人员 -->
				<template v-if="userType==7 || userType==6">
					<view class="tab" @click="$goBack('/pages/dgs_qy/load-goods/load-query/loadQuery')">
						<image class="tab_img" src="/static/image/taizhang.png"></image>
						<text class="tab_text">装货查询</text>
					</view>
					<view class="tab" @click="$goBack('/pages/dgs_qy/load-goods/unload-query/unloadQuery')">
						<image class="tab_img" src="/static/image/taizhang.png"></image>
						<text class="tab_text">卸货查询</text>
					</view>
					<view class="tab" @click="$goBack('/pages/dgs_qy/info-search/info-search')">
						<image class="tab_img" src="/static/image/info-search.png"></image>
						<text class="tab_text">信息查询</text>
					</view>
					<view class="tab" @click="$goBack('/pages/dgs_qy/know-base/know-base')">
						<image class="tab_img" src="/static/image/zsk.png"></image>
						<text class="tab_text">知识库</text>
					</view>
				</template>
				<template v-else>
					<view class="tab" @click="rwgl()">
						<image class="tab_img" src="/static/image/rwgl.png"></image>
						<text class="tab_text">任务管理</text>
					</view>
					<view class="tab" @click="$goBack('/pages/dgs_qy/info-search/info-search')">
						<image class="tab_img" src="/static/image/info-search.png"></image>
						<text class="tab_text">信息查询</text>
					</view>
					<view class="tab" @click="$goBack('/pages/dgs_qy/know-base/know-base')">
						<image class="tab_img" src="/static/image/zsk.png"></image>
						<text class="tab_text">知识库</text>
					</view>
					<view class="tab" @click="$goBack('/pages/dgs_qy/standingBook/list')">
						<image class="tab_img" src="/static/image/taizhang.png"></image>
						<text class="tab_text">活动台账</text>
					</view>
				</template>
			</view>
		</view>

		<!-- 装卸货 -->
		<view class="view_content" v-if="userType==7 || userType==6">
			<nodata class="nodata" v-if="!unloadData && !loadData"></nodata>
			<unloadItem class="list_item" v-if="unloadData" :reqQuery="unloadData">
			</unloadItem>
			<loadItem class="list_item" v-if="loadData" :reqQuery="loadData">
			</loadItem>
		</view>
		<view class="view_content" v-else>
			<nodata class="nodata" v-if="isData"></nodata>
			<view class="imglisty" v-for="(item,index) in listData" :key="index">
				<taskItemJ class="list_item" v-if="getUserType==1" :reqQuery="item">
				</taskItemJ>
				<taskItemQ class="list_item" v-if="getUserType!=1" :reqQuery="item">
					<view class="view_btn" v-show="item.taskState=='0'">
						<view class="btn" @click="clickCopy(item)">
							<text>复制</text>
						</view>
						<!-- <view class="btn" @click="clickDelete(item)">
							<text>删除</text>
						</view> -->
					</view>

					<view class="view_btn" v-show="item.taskState=='1'">
						<view class="btn">
							<text>修改</text>
						</view>
						<view class="btn">
							<text>确认</text>
						</view>
						<view class="btn" @click="clickCopy(item)">
							<text>复制</text>
						</view>
						<view class="btn" @click="clickCancel(item)">
							<text>取消</text>
						</view>
					</view>

					<view class="view_btn" v-show="item.taskState=='2'">
						<view class="btn" @click="diaoduBtn(item)">
							<text>调度</text>
						</view>
						<view class="btn" @click="clickCopy(item)">
							<text>复制</text>
						</view>
						<view class="btn" @click="clickCancel(item)">
							<text>取消</text>
						</view>
					</view>


					<view class="view_btn" v-show="item.taskState=='3'">
						<view class="btn" @click="jianchaBtn(item)">
							<text>检查</text>
						</view>
						<view class="btn" @click="clickCopy(item)">
							<text>复制</text>
						</view>
						<view class="btn" @click="clickCancel(item)">
							<text>取消</text>
						</view>
					</view>

					<view class="view_btn" v-show="item.taskState=='4' ||item.taskState=='5'">
						<view class="btn" @click="clickCopy(item)">
							<text>复制</text>
						</view>
					</view>


					<view class="view_btn"
						v-show="item.taskState!='0' && item.taskState!='1' && item.taskState!='2' && item.taskState!='3' && item.taskState!='4' && item.taskState!='5' ">
						<view class="btn" @click="clickCopy(item)">
							<text>复制</text>
						</view>
						<view class="btn" @click="clickDelete(item)">
							<text>删除</text>
						</view>
					</view>
				</taskItemQ>

			</view>
		</view>

		<view class="message-bg" v-if="messageData.show">
			<view class="message-box">
				<image mode="widthFix" class="message-img" src="/static/message.png"></image>
				<view class="message-info">
					<view class="message-title">{{messageData.title||'-'}}</view>
					<view class="message-msg">{{messageData.msg||'-'}}</view>
					<view class="message-button" @click="messageData.show=false">我知道了</view>
				</view>
			</view>
		</view>

		<modal-cancel-btn :visible.sync="checkCancelConfirm" @confirm="checkNoChange" :data="cancelDialogMap">
		</modal-cancel-btn>
		<tabBar :current="0" />
	</view>
</template>

<script>
	import nodata from '@/components/nodata.vue'
	import taskItemJ from '@/components/tool_task/task_item_jy.vue'
	import taskItemQ from '@/components/tool_task/task_item_qy.vue'

	import loadItem from '@/components/load-item/load-item.vue'
	import unloadItem from '@/components/load-item/unload-item.vue'

	import store from "@/store/index"
	import modalCancelBtn from '@/components/tool-modal/modal-cancelBtn.vue';

	import tabBar from '@/components/tab-bar/tab-bar.vue'
	import {
		dateFormat
	} from "@/common/util.js"
	export default {
		data() {
			return {
				messageData: {
					show: false,
					title: '',
					msg: ''
				},
				checkCancelConfirm: false,
				cancelDialogMap: {
					consignSquareName: '',
					taskName: '',
					estimateLoadingTime: '',
					estimateUnloadingTime: '',
					type: '', //type 1是取消 2是删除
				},
				isData: false,
				listData: [],
				city: '',
				num: 0, //消息角标
				getUserType: "", //人员类型
				tabBarLists: [],

				loadData: null,
				unloadData: null
			}
		},
		computed: {
			userType() {
				return this.$store.state.userType
			},
			userInfo() {
				return this.$store.state.userInfo;
			}
		},
		components: {
			nodata,
			taskItemJ,
			taskItemQ,
			modalCancelBtn,
			tabBar,
			loadItem,
			unloadItem
		},
		mounted() {
			this.getUserType = store.getters.getUserType
			//获取定位信息
			this.location()
			//初始化获取消息数量
			this.getMessageCount()

			this.getCommonData();
			// console.log(11, this.$store.getters.getEmpInfoId)
		},
		onLoad(e) {
			// 隐藏原生的tabbar,有自定义tabbar的页面都要写一遍
			uni.hideTabBar()
			if (e.isLogin) {
				this.getMessage();
			}
		},
		onShow() {
			//获取列表
			this.getTaskListData()
			//获取装卸货列表
			this.loadQuery()
		},
		methods: {
			// 获取消息
			getMessage() {
				const data = {
					paramKey: 'wyad.app.infoMsg',
				}
				this.$api.paramList(data).then(res => {
					const list = res.data.data.records;
					const resData = {}
					list.forEach(item => {
						resData[item.paramKey] = item.paramValue;
					})
					Object.assign(this.messageData, {
						show: resData['wyad.app.infoMsg.show'] === 'true',
						title: resData['wyad.app.infoMsg.title'],
						msg: resData['wyad.app.infoMsg.msg'],
					})
				})
			},
			// 获取字典及通用配置数据
			getCommonData() {
				// 获取地区数据
				this.$api.getAdr().then(res => {
					// console.log(res.data.data)
					const resData = res.data.data.slice(1); // 去掉第一个“中华人民共和国”
					this.$store.commit('set_regionData', resData)
				});
				// 文件服务器地址
				this.$api.getDict({
					code: 'bill_pdf_domain'
				}).then(res => {
					const resData = res.data.data[0]['children'][0];
					this.$store.commit('set_BillPdfDomain', resData.dictValue);
				});
			},

			//复制按钮
			clickCopy(item) {
				this.$goBack('/pages/dgs_qy/task/create_task?dispCheckId=' + item.dispCheckId +
					'&taskId=' + item.taskId +
					'&id=' + item.id +
					'&page=3', 2)
			},
			goNotice() {
				uni.navigateTo({
					url: '../notice/notice'
				})
			},
			//删除按钮
			clickDelete(item) {
				this.cancelDialogMap.consignSquareName = item.consignSquareName
				this.cancelDialogMap.taskName = item.taskName
				this.cancelDialogMap.estimateLoadingTime = item.estimateLoadingTime
				this.cancelDialogMap.estimateUnloadingTime = item.estimateUnloadingTime
				this.cancelDialogMap.id = item.id
				this.cancelDialogMap.taskId = item.taskId
				this.cancelDialogMap.type = '2'
				this.checkCancelConfirm = true
			},
			//取消按钮
			clickCancel(item) {
				// console.log(item, "---------")
				this.cancelDialogMap.consignSquareName = item.consignSquareName
				this.cancelDialogMap.taskName = item.taskName
				this.cancelDialogMap.estimateLoadingTime = item.estimateLoadingTime
				this.cancelDialogMap.estimateUnloadingTime = item.estimateUnloadingTime
				this.cancelDialogMap.id = item.id
				this.cancelDialogMap.taskId = item.taskId
				this.cancelDialogMap.type = '1'
				this.checkCancelConfirm = true
			},
			//调度按钮
			diaoduBtn(item) {

				this.$goBack('/pages/dgs_qy/task/task_dispatch?dispCheckId=' + item.dispCheckId +
					'&taskId=' + item.taskId +
					'&id=' + item.id +
					'&type=2', 2)
			},
			//检查按钮
			jianchaBtn(item) {
				this.$goBack('/pages/dgs_qy/task/task_inspect?dispCheckId=' + item.dispCheckId +
					'&taskId=' + item.taskId +
					'&id=' + item.id, 2)
			},



			checkNoChange(data) {
				if (data.type == '1') { //是取消
					this.$api.taskCancel({
						'id': data.id,
						"taskId": data.taskId,
						'cancelReson': data.checkReason,
						'taskState': '0',
					}).then(res => {
						this.getTaskListData()
					}).catch(res => {})
				} else if (data.type == '2') { //是删除
					this.$api.taskCancel({
						'id': data.id,
						"taskId": data.taskId,
						'cancelReson': data.checkReason,
						'taskState': '0',
					}).then(res => {
						this.getTaskListData()
					}).catch(res => {})
				}
			},
			//获取任务列表
			getTaskListData() {
				// console.log(store.getters.getUserType)
				if (store.getters.getUserType == 0) {
					let newDate = new Date();
					newDate.setMonth(newDate.getMonth() - 1);
					//企业
					this.$api.getTaskList({
						position: '1',
						current: '1',
						size: '10',
						personType: store.getters.getUserType,
						ecertTaskState: '',
						taskState: '3',
						startDate: dateFormat(new Date(newDate), "YYYY-mm-dd 00:00:00"),
						endDate: dateFormat(new Date(), "YYYY-mm-dd 23:59:59"),
					}).then(res => {
						// console.log(res, '111')
						if (res.data.code == 200) {
							this.listData = res.data.data.records
							if (this.listData.length == 0) {
								this.isData = true
							} else {
								this.isData = false
							}
						}
					}).catch(res => {})
				} else {
					//驾押
					this.$api.getWaybillList({
						type: '2',
						personType: store.getters.getUserType,
						current: '1',
						size: '10',
						empInfoId: store.getters.getEmpInfoId
					}).then(res => {
						// console.log(res, '2222')
						if (res.data.code == 200) {
							this.listData = res.data.data.records
							if (this.listData.length == 0) {
								this.isData = true
							} else {
								this.isData = false
							}
						}
					}).catch(
						res => {
							// console.log(res)
						})
				}

			},
			//装货查询卸货查询
			loadQuery() {
				if (this.userType == 6 || this.userType == 7) {
					let params = {
						current: 1,
						size: 1,
					}
					this.$api.getunLoadList(params).then(res => {
						console.log(res, '--------');
						this.unloadData = res.data.data.records.length ? res.data.data.records[0] : null
					})
					this.$api.getLoadList(params).then(res => {
						console.log(res, '-------||||||||-');
						this.loadData = res.data.data.records.length ? res.data.data.records[0] : null
					})
				}

			},
			//获取消息数量
			getMessageCount() {
				this.$api.getMsgCount({
					targetId: store.getters.getEmpInfoId
				}).then(res => {
					// console.log(res)
					if (res.statusCode == 200) {
						var list = res.data.data
						list.forEach(value => {
							this.num += value.count
						})
					}
				}).catch(() => {});
				if ([2, 3].includes(this.userInfo.userRoleType)) {
					const data = {}
					if (this.userInfo.userRoleType == 3) {
						data.empInfoId = this.$store.state.userInfo.empInfoId;
					} else {
						data.ownerId = this.$store.state.userInfo.ownerId;
					}
					this.$api.warnFeedbackCount(data).then(res => {
						this.num += Number(res.data.data)
					})
				}
			},
			location() {
				var that = this
				var weidu = ''
				var jd = ''
				if (uni.getStorageSync('position') == '') {
					uni.getLocation({
						geocode: true,
						type: 'wgs84',
						success: (res) => {
							// console.log('位置是', res)
							weidu = res.latitude
							jd = res.longitude
							uni.request({
								url: 'https://restapi.amap.com/v3/geocode/regeo?location=' + jd +
									',' + weidu + '&key=a5b6c60bf58424fbaaf0f4955ac9058a',
								success: (res) => {
									if (res.statusCode == 200) {
										var city = res.data.regeocode.addressComponent.city
										var province = res.data.regeocode.addressComponent.province
										if (city != "") {
											this.city = city
										} else {
											this.city = province
										}
									}
								}
							})

						}
					})
				}
			},
			//任务管理
			rwgl() {
				var userType = store.getters.getUserType
				if (userType == 1) { // 1==驾押人员   0== 企业管理人员
					this.$goBack('/pages/dgs_qy/task/jy_ts_mg')
				} else {
					this.$goBack('/pages/dgs_qy/task/qy_ts_mg')
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F0F0F0;
	}

	.message-bg {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.85);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;

		.message-box {
			width: 600rpx;
			position: relative;

			.message-img {
				width: 100%
			}

			.message-info {
				position: absolute;
				top: 240rpx;
				left: 30rpx;
				right: 30rpx;
				bottom: 40rpx;
				color: #333;
				text-align: justify;
				display: flex;
				flex-direction: column;

				.message-title {
					font-size: 32rpx;
					line-height: 56rpx;
				}

				.message-msg {
					font-size: 24rpx;
					line-height: 44rpx;
					flex: 1;
					overflow: auto;
					margin: 20rpx 0 40rpx 0;
				}

				.message-button {
					width: 100%;
					line-height: 90rpx;
					border-radius: 90rpx;
					font-size: 36rpx;
					text-align: center;
					color: #fff;
					background: #F2BA38;
				}
			}
		}
	}

	.view_content {
		overflow: auto;
		flex: 1;


		.nodata {
			padding-top: 200rpx;
			margin: 0rpx auto;
		}

		.list_item {
			border-radius: 20rpx;
			background-color: #FFFFFF;
			padding-bottom: 20rpx;

			.view_btn {
				display: flex;
				justify-content: flex-end;
				padding-right: 35rpx;
				padding-top: 20rpx;

				.btn {
					display: flex;
					width: 100rpx;
					height: 50rpx;
					border: 3rpx solid $app-color;
					border-radius: 30rpx;
					align-items: center;
					justify-content: center;
					margin-left: 8rpx;
					margin-right: 8rpx;

					text {
						color: $app-color;
					}
				}
			}

		}
	}

	.view_bg {
		height: 585rpx;
		margin-bottom: 30rpx;

		.view_top {
			display: flex;
			height: 50rpx;
			line-height: 50rpx;
			justify-content: space-between;
			// left: 35rpx;
			// right: 35rpx;
			// position: absolute;
			// top: 40px;
			margin: -460rpx 35rpx 0rpx 35rpx;
			position: relative;

			.num {
				position: absolute;
				font-weight: normal;
				right: 0;
				top: 0;
				transform: translate(50%, -50%);
				background-color: #f00;
				border-radius: 30rpx;
				font-size: 26rpx;
				line-height: 30rpx;
				min-width: 30rpx;
				color: #FFFFFF;
				box-sizing: border-box;
				padding: 0 6rpx;
			}

			.message {
				width: 32rpx;
				height: 32rpx;
				padding: 0rpx;
				margin-top: 8rpx;
			}
		}

		.view_buttom {
			background-color: #FFFFFF;
			display: flex;
			border-radius: 10px;
			// left: 20rpx;
			// right: 20rpx;
			// position: absolute;
			// top: 205px;
			margin: 270rpx 20rpx 0rpx 20rpx;
			position: relative;
			text-align: center;
			padding-top: 15rpx;
			padding-bottom: 25rpx;

			.tab {
				flex: 1;
				display: flex;
				flex-direction: column;

				.tab_img {
					width: 120rpx;
					height: 120rpx;
					margin: 0rpx auto;
				}

				.tab_text {
					font-weight: 600;
				}

			}
		}

		.img_bg {
			width: 100%;
			height: 520rpx;

		}
	}
</style>